import { createContext, useContext, useState } from "react";
const MsgContext = createContext()
function useToggle() {
    const [val, setval] = useState(true)
    function toggle() {
        setval(!val)
    }
    return {
        val,
        toggle
    }
}
function Father() {
    const {val,toggle} = useToggle()
    const msg = 'I am msg'
    const SonValue = function (val) {
        console.log('我是Father,我获取到了Son的值,为' + val);
    }
    return (
       <div style={{ background: 'green', padding: "10px" }}>
            <button onClick={toggle}>toggle</button>
            {val &&  <div>This is Father</div>}
            <Son name="Jack" getSonValue={SonValue}>
                <div style={{ background: '#2a2ac8' }}>Father 给 Son 的标签</div>
            </Son>
            <MsgContext.Provider value={msg}>
                <SonBrother></SonBrother>
            </MsgContext.Provider>
        </div>
    )
}

function Son(props) {
    console.log(props);
    console.log(props.children);
    const { getSonValue } = props
    const value = '123'
    return (
        <div style={{ background: "blue" }}>
            <div>this is Son</div>
            {props.children}
            <button onClick={() => { getSonValue(value) }}>把 123 给 fatger</button>
        </div>
    )
}
function SonBrother() {
    return (
        <div style={{ background: "red" }}>
            <div>this is SonBrother</div>
            <SonSon></SonSon>
        </div>
    )
}
function SonSon() {
    const Msg = useContext(MsgContext)
    return (
        <div style={{ background: "red" }}>
            <div>this is SonSon</div>
            <div>{Msg}</div>
        </div>
    )
}
export default Father;